﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>提示框</title>
    <meta charset="utf-8" />
    <link href="../../assets/css/style.css" rel="stylesheet" />
</head>
<body id="body">
    <div class="page-wraper">
        <h3 class="page-title">弹出框</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="index.html">页面组件</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">弹出框</a>
                </li>
            </ul>
        </div>
        
        <div class="btn-group">
            <input type="button" class="btn" id="generalAlert" value="一般提示" />
            <input type="button" class="btn" id="successAlert" value="正确提示" />
            <input type="button" class="btn" id="warningAlert" value="警告" />
            <input type="button" class="btn" id="errorAlert" value="错误，失败提示" />
            <input type="button" class="btn" id="loadAlert" value="loading" />
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">弹出框调用代码</h3>
            </div>
            <div class="panel-body">
                <pre>
<code data-language="html">//上面的测试调用HTML代码
<div class="btn-group">
    <input type="button" class="btn" id="generalAlert" value="一般提示" />
    <input type="button" class="btn" id="successAlert" value="正确提示" />
    <input type="button" class="btn" id="warningAlert" value="警告" />
    <input type="button" class="btn" id="errorAlert" value="错误，失败提示" />
    <input type="button" class="btn" id="loadAlert" value="loading" />
</div>
</code>
</pre>


                <pre>
<code data-language="js">//上面的测试调用的JS代码，该文件位于assets/js/page/alert.js中
//弹出框调用js，
var
        wxAlert = top.wx_alert,//如果本地没有wxAlert就使用顶部框架的wxAlert对象
        $generalBtn = $("#generalAlert"),
        $successBtn = $("#successAlert"),
        $errorBtn = $("#errorAlert"),
        $loadBtn = $("#loadAlert"),
        $warnBtn = $("#warningAlert");
/* 
调用方法
wxAlert.show(paramsObj);
paramsObj为一个对象，对象有四个可选属性
1、type—— 提示框的类型，分别有
            right——正确
            error——错误
            waring——警告
            quest——疑问
            loading——正在加载    
2、txt ——提示框上面写的文字（字符串）
3、time——提示框显示的时间，默认为两秒（数字，以毫秒为单位）  
4、mask——是否带遮罩层，可取true（显示），false（不现实）默认为false   
*/
//调用一般，正常，无特殊样式的弹出框
$generalBtn.on("click", function () {
    wxAlert.show({
        type: "quest",
        txt: "疑问有问题",
        time: 5000 //可以不写，默认2秒后隐藏弹出框
    });
});
//调用正确，成功样式的弹出框
$generalBtn.on("click", function () {
    wxAlert.show({
        type: "right",
        txt: "成功了！",
        time: 2000,
        mask:true //显示遮罩层
    });
});
//调用失败、错误样式的弹出框
$generalBtn.on("click", function () {
    wxAlert.show({
        type: "error",
        txt: "失败了",
        time: 2000
    });
});
//调用正在加载样式的弹出框
$generalBtn.on("click", function () {
    wxAlert.show({
        type: "loading",
        txt: "疑问有问题",
        time: 5000
    });
});
//调用警告，警示的提示框
$warnBtn.on("click", function () {
    wxAlert.show({
        type: "waring",
        txt: "警告",
        time: 2000
    });
});
</code>
</pre>
            </div>
        </div>
    </div>

    <!--JS代码-->
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
    <script src="../../assets/js/page/alert.js"></script>

</body>
</html>
